<template>
	 <view class="order-container">

	    <!-- 主要内容区域 -->
	    <scroll-view class="content" scroll-y>
	      <!-- 核销码区域 -->
	      <view class="qrcode-section" v-show="orderData.status=='待使用'">
	        <view class="qrcode-box">
	          <text class="verify-code">核销码：{{ orderData.verifyCode }}</text>
	          <view class="qrcode-placeholder">
	            <!-- 二维码组件占位区域 -->
	            <text style="color: #999;">二维码组件占位区</text>
	          </view>
	        </view>
	      </view>
	
	      <!-- 订单信息 -->
	      <view class="info-card">
	        <view class="info-header">
	          <text class="info-title">订单信息</text>
	        </view>
	        
	        <view class="info-item info-ui">
				<view>
					<text>订单号：</text>
					<text>{{ orderData.orderNo }}</text>
				</view>
			  <text class="order-status">{{ orderData.status }}</text>
	        </view>
	        <view class="info-item">
	          <text>服务项目：</text>
	          <text>{{ orderData.serviceItem }}</text>
	        </view>
			<view class="info-item serve-shop">
				<view>
					<text>服务门店：</text>
			  <text>{{ orderData.store }}</text>
				</view>
			  
			  <view class="navigate" style="margin-left: 20rpx;">✈</view>
			</view>
			<view class="info-item">
			  <text>下单时间：</text>
			  <text>{{ orderData.orderTime }}</text>
			</view>
			<view class="info-item">
			  <text>预约时间：</text>
			  <text>{{ orderData.appointmentTime }}</text>
			</view>
			<view class="info-item">
			  <text>车辆：</text>
			  <text>{{ orderData.vehicle }}</text>
			</view>
			<view class="info-item">
			  <text>备注：</text>
			  <text>{{orderData.remark}}</text>
			</view>
	        <!-- 其他信息项... -->
	      </view>
	
	      <!-- 订单详情 -->
	      <view class="detail-card">
	        <view class="detail-header info-title">订单详情</view>
	        <view class="price-item" v-for="(item, index) in orderData.priceDetails" :key="index">
	          <text>{{ item.name }}</text>
	          <text>￥ {{ item.price }}</text>
	        </view>
	      </view>
	
	      <!-- 支付金额 -->
	      <view class="total-section">
	        <view class="total-item">
	          <text>原价</text>
	          <text>￥ {{ orderData.originalPrice }}</text>
	        </view>
	        <view class="total-item">
	          <text>优惠</text>
	          <text class="discount">-￥ {{ orderData.discount }}</text>
	        </view>
	        <view class="total-amount">
	          <text>支付金额</text>
	          <text class="amount">￥ {{ orderData.totalAmount }}</text>
	        </view>
	      </view>
	    </scroll-view>
		
		<!-- 评价结果 -->
		<view class="evaluate-section" v-show="orderData.status=='已完成'">
			<view class="evaluate-header">
				<text>评价结果</text>
			</view>
			<view class="evaluate-time evaluate-item">
				<text >
					评价时间:{{evaluateData.time}}
				</text>
			</view>
			<view class="evaluate-star evaluate-item">
				<text >
					评价星级:
					<uni-rate
					v-model="evaluateData.star"
					 :touchable='false'
					 :value='5'
					@change="onChange"/>
				</text>
			</view>
				<view class="evaluate-content evaluate-item">
					<text >
					评语:{{evaluateData.comment}}
				</text>
				</view>
		</view>
		
	
	<!-- 底部占位 -->
	<view class="btm-bar-block">
		
	</view>
	    <!-- 底部操作栏 -->
	    <view class="action-bar">
			<view class="btm contact-btn">
				<view class="contect-img">
					<image src="/static/客服.png" mode="widthFix"/>
				</view>
					<text>联系客服</text>
			</view>
			<view class="btm btm-btns" >
				<view v-show="orderData.status=='待评价'
					||orderData.status=='已取消'
					||orderData.status=='已退款'
					||orderData.status=='已完成'
					">
					<button class="btn blue-btn another-btn" 
					>再来一单</button>
				</view>
				<view v-show="orderData.status=='待支付'">
					<button class="btn blue-btn paying-btn" 
					>立即支付</button>
				</view>
				<view v-show="orderData.status=='待评价'">
					<button class="btn white-btn evaluate-btn"
					@click= "navTo(
					'/packageMy/OrderEvaluate/OrderEvaluate',
					{
					    // 传递的数据
						id:orderData.orderNo
					})"
					>
						立即评价</button>
				</view>
				<view v-show="orderData.status=='待支付'">
					<button class="btn white-btn cancel-btn"
					>取消订单</button>
				</view>
				<view v-show="orderData.status=='待使用'">
					<button class="btn white-btn refund-btn">申请退款</button>
				</view>
			</view>
	      
	      
	    </view>
	  </view>
</template>

<script setup>
	import {onMounted,ref,reactive} from 'vue';
	import { useRoute } from 'vue-router';
	import { onLoad } from '@dcloudio/uni-app'; // 引入 uni-app 的 onLoad 钩子
	const route=useRoute();
	const id=ref(-1);
	
	onLoad(()=> {
				// 获取上一个页面传过来的数据
				const pages = getCurrentPages();  // 无需import
				const page = pages[pages.length - 1];
				const eventChannel = page.getOpenerEventChannel();
				eventChannel.on('orderInfo', (data) => {
					console.log("id:"+data.id);
					console.log("status:"+data.status);
					id.value=data.id;
					orderData.status=data.status;
					//做导航栏标题处理
					uni.setNavigationBarTitle({
						title:data.status+"订单"
					})
				})
				
			})
			
			
	// 动态数据
	const orderData = reactive({
	  verifyCode: 'WE343235V',
	  orderNo: '12121212487878',
	  status: '待使用',
	  serviceItem: '车辆保养',
	  store: '大宝车辆维修店',
	  orderTime: '2020.01.08.17:40',
	  appointmentTime: '2020.01.08.17:40',
	  vehicle: '奔驰FWE4/豫A98FHJ',
	  remark: '',
	  priceDetails: [
	    { name: '车铺精选', price: 199 },
	    { name: '车辆附加费用', price: 199 }
	  ],
	  originalPrice: 398,
	  discount: 198,
	  totalAmount: 200
	});
	
	//评价数据
	const evaluateData=reactive({
		time:"2022-10-10 11:09",
		star:4,
		comment:"好，很好，非常好！"
	})
	
	//导航跳转
	function navTo(path,obj){
			uni.navigateTo({
				url:path,
				success:function(res){
					 // 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('orderInfo', obj)
				}
			})
	}
</script>

<style lang="scss" scoped>
	  .order-container {
	    background-color: #f5f5f5;
	    min-height: 100vh;
	    
	    .header {
	      padding: 30rpx;
	      background-color: #fff;
	      .title {
	        font-size: 36rpx;
	        font-weight: bold;
	      }
	    }
		// 订单信息部分
		.info-title{
			font-size: 20px;
		}
		.info-item{
			margin: 10rpx 0;
		}
		.serve-shop{
			display: flex;
			flex-wrap: nowrap;
			
		}
		.info-ui{
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
		.order-status{
			color:red
		}
		
		//订单详情
		.price-item{
			margin: 10rpx 0;
		}
	  
	    .qrcode-section {
			font-weight: bold;
			font-size: 20px;
			text-align: center;
	      background: #fff;
	      padding: 30rpx;
	      margin: 20rpx;
	      border-radius: 16rpx;
	      
	      .qrcode-placeholder {
	        height: 300rpx;
	        background: #f8f8f8;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        margin-top: 20rpx;
	      }
	    }
	  
	    .info-card, .detail-card {
	      background: #fff;
	      margin: 20rpx;
	      padding: 30rpx;
	      border-radius: 16rpx;
		  
	      
	      .info-header {
	        display: flex;
	        justify-content: space-between;
	        margin-bottom: 30rpx;
	      }
	    }
		
		.detail-card>view{
			display: flex;
			justify-content: space-between;
		}
	  
	    .total-section {
	      background: #fff;
	      margin: 20rpx;
	      padding: 30rpx;
	      border-radius: 16rpx;
	      .total-item{
			  margin: 10rpx 0;
		  }
	      .total-amount {
	        border-top: 1rpx solid #eee;
	        padding-top: 20rpx;
	        margin-top: 20rpx;
	        
	        .amount {
	          color: #f40;
	          font-size: 36rpx;
	        }
	      }
		  .discount{
			  color: red;
		  }
	    }
		.total-section>view{
			display: flex;
			justify-content: space-between;
		}
		// 评价结果
		.evaluate-section{
			background: #fff;
			margin: 20rpx;
			padding: 30rpx;
			border-radius: 16rpx;
			.evaluate-item{
				margin: 10rpx 0;
			}
		}
		.evaluate-header{
			font-size: 20px;
		}
		
		// 底部占位
		.btm-bar-block{
			height: 100rpx;
		}
	  // 底部栏
	    .action-bar {
	      position: fixed;
	      bottom: 0;
	      width: 100%;
	      display: flex;
		  justify-content: space-between;
		  align-items: center;
		  text-align: center;
	      padding: 20rpx;
	      background: #fff;
	      box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.05);
	      .btm-btns {
	      	display: flex;
	      	flex-wrap: nowrap;
	      	justify-content: space-between;
	      }
		  .btn{
			  margin-left: 20rpx;
		  }
	      .btm {
	        margin: 0 30rpx;
	        border-radius: 50rpx;
	        .blue-btn{
				background-color: #0084ff;
				color: white;
			}
			.white-btn{
				background-color: #fff;
				border: #007aff 1px solid;
				color: black;
			}
	        .contact-btn {
	          background: #007aff;
	          background-color: #007aff;
			  display: flex;
			  flex-wrap: wrap;
			  margin-left: 0;
	        }
			.contect-img image{
				width: 50rpx;
			}
	      }
	    }
	  }     
</style>
